<script>

export default {
  data(){
    return {
      title:"",
      data:{
      },
      show: false
    }
  },
  mounted(){


  },
  methods: {
    // 初始化地图
    open(title,data){
      this.title = title;
      this.data = data;
      this.show = true;
      this.toChart();
    },
    toChart(){
      let chartDom = document.getElementById('chart');
      let myChart = echarts.init(chartDom);
      let option;

      option = {
        title: {
          text: '设备1的温度'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {},
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: ['11:00', '11:30', '12:00', '12:30', '13:00', '13:30', '14:00']
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            type: 'line',
            data: [10, 11, 13, 11, 12, 12, 9],
            markPoint: {
              data: [
                { type: 'max', name: 'Max' },
                { type: 'min', name: 'Min' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: 'Avg' }]
            }
          },
        ]
      };

      option && myChart.setOption(option);
    },
    // 关闭
    close() {
      this.show = false;
    }
  }
}
</script>

<template>
  <el-dialog
      draggable
      width="900px"
      :title="title"
    v-model="show"
  @close="close"
  >
    <div style="text-align: center">
      <div
          class="box"
          id="chart"
          style="display: inline-block;width: 700px;height: 400px;border-radius: 10px">
      </div>
      <div>
        <!-- 按小时、按天、按年 -->
        <el-button type="primary" size="small" style="margin-left: 20px">{{$i18n.zhToGlobal("小时")}}</el-button>
        <el-button size="small" style="margin-left: 20px">{{$i18n.zhToGlobal("日")}}</el-button>
        <el-button size="small" style="margin-left: 20px">{{$i18n.zhToGlobal("月份")}}</el-button>
      </div>
    </div>
  </el-dialog>

</template>

<style scoped lang="scss">
</style>